<template>
  <div class="container-fluid">
    <top-nav></top-nav>
    <!-- logo -->
    <div class="login-header">
      <img
        src="https://img.alicdn.com/tfs/TB1_Gn8RXXXXXXqaFXXXXXXXXXX-380-54.png"
        alt=""
      />
    </div>
    <div class="login-content">
      <div class="login-bg">
        <div class="login-from">
          <ul class="login-item">
            <li>用户注册</li>
          </ul>
          <div class="from">
            <div class="login-info">
              <div class="login-icon">
                <i class="iconfont icon-yonghufill"></i>
              </div>
              <div>
                <input
                 style="width:268px"
                  type="text"
                  name="用户名"
                  placeholder="请输入昵称"
                  v-model="name"
                />
              </div>
            </div>
            <div class="login-info">
              <div class="login-icon">
                <i class="iconfont icon-yanzhengmamima"></i>
              </div>
              <div>
                <input
                 style="width:268px"
                  type="text"
                  name="邮箱"
                  placeholder="请输入邮箱"
                  v-model="email"
                  required
                />
              </div>
            </div>
            <div class="login-info">
              <div class="login-icon"><i class="iconfont icon-mima"></i></div>
              <div>
                <input
                 style="width:268px"
                  id="pwd"
                  type="password"
                  name="密码"
                  placeholder="请输入密码"
                  v-model="password"
                />
              </div>
            </div>
            <div class="login-info">
              <div class="login-icon"><i class="iconfont icon-mima"></i></div>
              <div>
                <input
                 style="width:268px"
                  id="pwds"
                  type="password"
                  name="确认密码"
                  placeholder="请再次输入密码"
                  v-model="password_confirmatio"
                />
              </div>
            </div>
            <p class="text-danger small text-start"></p>
            <input
             style="width:268px"
              type="submit"
              value="注册"
              class="btn btn-danger"
              @click="onSubmit"
            />

            <a class="zhuce" @click.prevent="toLogin" href="#"
              >已有账号？立即登录</a
            >
          </div>
        </div>
      </div>
    </div>
    <footers></footers>
  </div>
</template>

<script>
import Footers from "../index/footer/Footers.vue";
import { ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import TopNav from "components/content/TopNav.vue";
import { register } from "network/user.js";
export default {
  components: { Footers, TopNav },
  setup(props) {
    const router = useRouter();
    //跳转函数
    const toLogin = () => {
      router.push({
        path: "/login",
      });
    };
    //用户信息
    const userinfo = reactive({
      name: "",
      password: "",
      password_confirmatio: "",
      email: "",
    });
    const onSubmit = () => {
      //信息验证
      if (userinfo.password != userinfo.password_confirmatio) {
        alert("两次密码不一致");
      } else {
        register(userinfo).then((res) => {
          console.log(res);
        });
      }
    };
    return {
      onSubmit,
      ...toRefs(userinfo),
      toLogin,
    };
  },
};
</script>

<style scoped>
.container-fluid {
  padding: 0px;
  background: #ffffff;
}
.login-header {
  position: relative;
  margin: 0 auto;
  background: #ffffff;
  padding: 22px 0;
  width: 1190px;
  height: 70px;
}
.login-header > img {
  position: absolute;
  left: 10px;
  width: auto;
  height: 25px;
}
.login-content {
  width: 100%;
  background-color: rgb(221, 39, 38);
  height: 600px;
}
.login-content > .login-bg {
  position: relative;
  background-image: url("https://gw.alicdn.com/tfs/TB1kcCBSpXXXXarapXXXXXXXXXX-1190-600.png");
  background-repeat: no-repeat;
  width: 1190px;
  height: 600px;
  margin: 0 auto;
}
.login-content > .login-bg > .login-from {
  position: absolute;
  top: 40px;
  border-radius: 10px;
  right: 80px;
  background: #ffffff;
  width: 350px;
  height: 500px;
}

.login-item {
  padding: 0px;
  margin-left: 20px;
  margin-top: 40px;

  display: flex;
}
.login-item > li {
  margin: 0 10px;
  font-size: 16px;
  font-weight: bold;
}
.login-from > .from {
  padding: 20px;
}
.login-from .login-info {
  margin-bottom: 30px;
  display: flex;
  border: 1px solid #ccc;
}
.login-icon {
  line-height: 40px;
  width: 40px;
  height: 40px;
  background: #ccc;
}
.login-info input {
  outline: none;
  line-height: 40px;
  font-size: 15px;
  padding: 10px;
  border: none;
  height: 40px;
  width: 180px;
}
.login-info a {
  font-size: 12px;
  line-height: 40px;
  margin: 0 10px;
  text-decoration: none;
  color: #000000;
}
.btn {
  width: 300px;
}
.zhuce {
  float: right;
  font-size: 12px;
  line-height: 40px;
  margin: 0 10px;
  text-decoration: none;
  color: rgb(141, 137, 137);
}
.active {
  border-bottom: 2px solid red;
}
</style>